<template>
    <div class="box">
       
        <div class="top" ><h1>{{user.idcve }}</h1> 
     
        </div>
        <div class="mid"> <h1>简述</h1>
            <br>
            <span>{{ user.summary }}</span>
        <br>  
            <h1>CVSS v3 指标
            </h1><br>
            <!-- <el-table :data="tableData" style="width: 50%">
                <el-table-column prop="affectedProduct" label="" width="180" />
                <el-table-column prop="cvsssCoreNVD" label="NVD" width="180" />
                <el-table-column prop="cvsssCoreOE" label="openEuler" width="180"/>
            </el-table> -->
         

        <div>
            <!-- <el-table :data="data.tableData" style="width: 100%">
            <el-table-column prop="color" label="" width="180"></el-table-column>
            <el-table-column v-for="(i, index) in data.sizes" :label="i" align="center" header-align="center" :key="index">
             <template v-slot="scope">{{ scope.row[i] }}</template>
            </el-table-column>
        </el-table> -->
        <el-table :data="tableData" border style="width: 100%">
      <!-- 空表头（左上角空单元格） -->
      <el-table-column label="" >
        <template #default="scope">
          <strong>{{ scope.row.rowHeader }}</strong>
        </template>
      </el-table-column>

      <!-- 动态生成列头 -->
      <el-table-column
        v-for="(col, index) in columns"
        :key="index"
        :label="col"
        :prop="col"
        width="150"
      >
        <template #default="scope">
          {{ scope.row[col] }}
        </template>
      </el-table-column>
    </el-table>
         <!-- <el-table :data="tableData" style="width: 100%">
         <el-table-column prop="color" label="" width="180"> </el-table-column>
         <el-table-column v-for="(i, index) in sizes" :label="i" align="center" header-align="center" :key="index">
          <template v-slot="scope">{{ scope.row[i] }}</template>
            </el-table-column>
            </el-table> -->
        </div>

            <br>
             <h1>影响产品<br></h1>
            <span>{{ user.affectedProduct }}</span><br>
            <h1>影响组件<br></h1>
            <span>{{ user.affectedComponent }}</span><br>
            <br>
  
        </div>
        
        
           
            
    </div>
    </template>
    <script setup>
    import { ref, onMounted,computed} from 'vue';
    import { useRouter ,useRoute} from 'vue-router';
    import {detail} from '@/utils/api.js';
    import {reactive} from 'vue';
  
    const route = useRoute();
    const tableData=ref('')
    onMounted(() => {
        let row=route.query.row
        if(route.path==="/cve"){
        clickadd(row)
        }
        });
     const  columns =ref(["NVD", "openEuler"]);
     const rowHeaders =ref([
        "cvsssCore",
        "attackVector",
        "attackComplexity",
        "privilegesRequired",
        "userInteraction",
        "scope",
        "confidentiality",
        "integrity",
        "availability",
        ]);
    const rowHeaders1 =ref([
        'CVSS评分',
        'Attack Vector',
        "Attack Complexity",
        "Privileges Required",
        "User Interaction",
        "Scope",
        "Confidentiality",
        "Integrity",
        "Availability",
    ]);
    const rowHeaders2 =ref({
        CVSS评分:"cvsssCore",
        attackVector:"Attack Vector",
        attackComplexity:"Attack Complexity",
        PrivilegesRequired:"Privileges Required",
        UserInteraction:"User Interaction",
        scope:"scope",
        Confidentiality:"Confidentiality",
        Integrity:"Integrity",
        Availability:"Availability",
    });
    const rowHeaders3 =ref({
        cvsssCore: "CVSS评分",
        attackVector:"Attack Vector",
        attackComplexity:"Attack Complexity",
        privilegesRequired:"Privileges Required",
        userInteraction:"User Interaction",
        scope:"scope",
        confidentiality:"Confidentiality",
        integrity:"Integrity",
        availability:"Availability",
    });
       
        const user = ref({
            affectedComponent:'',
            affectedProduct: '',
            attackComplexityNVD: '',
            attackComplexityOE:'',
            attackVectorNVD:'',
            attackVectorOE:'',
            availabilityNVD:'',
            availabilityOE:'',
            confidentialityNVD:'',
            confidentialityOE:'',
            cvsssCoreNVD:'',
            cvsssCoreOE:'',
            id:'',
            idcve:'',
            integrityNVD:'',
            integrityOE:'',
            privilegesRequiredNVD:'',
            privilegesRequiredOE:'',
            scopeNVD:'',
            scopeOE:'',
            securityNoticeNo:'',
            status:'',
            summary:'',
            type:'',
            userInteractionNVD:'',
            userInteractionOE:''
        });
        
    // const securityNoticeNo=ref('')
    // const updateTime=ref('')
    // const announcementTime=ref('')
   
    const clickadd= (row) =>{
        detail(row).then((res)=>{
            user.value=res.data
            // rowHeaders1.value=rowHeader,
            const rowHeaders = rowHeaders3.value;

// 提取并映射数据
        tableData.value = Object.entries(rowHeaders).map(([key, label]) => {
  // 动态构建属性名（假设 NVD 版本字段以 "NVD" 结尾，可根据实际调整）
        const fieldName = `${key}NVD`; // 如 "cvsssCoreNVD"、"attackVectorNVD"
        const fieldName1 = `${key}OE`;
        return {
            rowHeader: label, // 中文描述（如 "CVSS评分"）
            NVD: res.data[fieldName],       // 防止接口数据缺失用空字符串代替
            openEuler:res.data[fieldName1],
        };
        });
            // tableData.value = rowHeaders.value.map((header) => ({
            // rowHeader:header,
            // NVD: res.data[header+'NVD'],       // 防止接口数据缺失用空字符串代替
            // openEuler:res.data[header+'OE'],
            // }));
            console.log(tableData.value);
            // data.tableData=res.data
        })
    }
        
     
    
    </script>
    <style scoped lang="less" >
    .box {
        height: 100%;
        .top{
        padding: 24px 40px;
        width: 100%;
        height: 200px;
        background-color: #dbddde;
        }
        .mid{
            padding: 24px 40px;
        margin-top: 16px;
        width: 100%;
        height: 100%;
        background-color: #dbddde;
        }
        .low{
        padding: 24px 40px;
        margin-top: 16px;
        width: 100%;
        height: 100%;
        background-color: #dbddde;
        }
    }
    </style>